<template>
  <div class="container">
    <div class="showCont" v-if="!showTimeOut && showCont">
      <div class="msgCont">
        <div
          class="msgItem"
          @click="toDetail(item)"
          :key="index"
          v-for="(item, index) in msgArr"
        >
          <div class="msgHead">
            <div class="headIcon" :style="'background-color:' + item.color">
              <div class="iconfont icon-tongzhi1"></div>
              <div class="yuan" v-if="item.is_read == 1"></div>
            </div>
            <div class="headName">
              <div v-if="item.message_type == 1">企业认证通知</div>
              <div v-if="item.message_type == 2">会员开通通知</div>
              <div v-if="item.message_type == 3">项目发布通知</div>
              <div v-if="item.message_type == 4">岗位发布通知</div>
              <div v-if="item.message_type == 5">外包投递通知</div>
              <div v-if="item.message_type == 6">岗位投递通知</div>
              <div v-if="item.message_type == 7">账号状态通知</div>
            </div>
            <div class="headTime">{{ item.create_time }}</div>
          </div>
          <div class="msgDes">{{ item.msg }}</div>
          <div v-if="item.message_type != 7" class="msgUnder">
            <div class="msgUnderLeft">查看详情</div>
            <div class="iconfont icon-jiantou"></div>
          </div>
        </div>
      </div>
      <noData v-if="msgArr.length == 0"></noData>
    </div>
    <footcpm></footcpm>
    <load v-if="!showCont"></load>
    <getTimeOut v-if="showTimeOut"></getTimeOut>
  </div>
</template>
<script>
import footcpm from "@/components/footcpm.vue";
import { Message, checkstatus } from "@/http/api";
import load from "@/components/public/load.vue";
import noData from "@/components/public/noData.vue";
import getTimeOut from "@/components/public/getTimeOut.vue";
export default {
  components: { footcpm, load, getTimeOut, noData },
  name: "",
  data() {
    return {
      showTimeOut: false,
      showCont: false,
      msgArr: [],
      msgColor: [
        { type: 1, color: "#5cc78e" },
        { type: 2, color: "#3273f6" },
        { type: 3, color: "#cb6ce6" },
        { type: 4, color: "#CC6633" },
        { type: 5, color: "#ff5757" },
        { type: 6, color: "#ffbd59" },
        { type: 7, color: "#86effb" },
      ],
      page: 1,
      per_page: 10,
      last_page: 0,
      loadMoreText: "",
      getting: false,
    };
  },
  props: {},
  setup() {},
  methods: {
    routerFN(item) {
      if (item.message_type == 1) {
        this.$router.push({ path: "/auth" });
      } else if (item.message_type == 2) {
        this.$router.push({ path: "/money" });
      } else if (item.message_type == 3 || item.message_type == 5) {
        this.$router.push({ path: "/orderDetail", query: { id: item.msg_id } });
      } else if (item.message_type == 4 || item.message_type == 6) {
        // this.$router.push({
        //   path: "/detail",
        //   query: { id: item.msg_id, type: 1 },
        // });
      }
    },
    toDetail(item) {
      let data = {
        message_id: item.message_id,
      };
      checkstatus(data)
        .then((res) => {
          this.routerFN(item);
          if (res.data.code == 1) {
            item.is_read = 2;
          }
        })
        .catch((err) => {
          this.routerFN(item);
        });
    },
    getData() {
      let data = {
        page: this.page,
        per_page: this.per_page,
      };
      Message(data)
        .then((res) => {
          if (res.data.code == 1) {
            let arr = res.data.data.data;
            if (arr.length > 0) {
              for (let i = 0; i < arr.length; i++) {
                for (let item of this.msgColor) {
                  if (item.type == arr[i].message_type) {
                    arr[i]["color"] = item.color;
                  }
                }
                this.msgArr.push(arr[i]);
              }
            }
            setTimeout(() => {
              this.getting = false;
            }, 100);
            this.last_page = res.data.data.last_page;
            if (this.page == this.last_page) {
              this.loadMoreText = "到底啦~";
            } else {
              this.loadMoreText = "数据加载中~";
            }
          } else {
            showToast(res.data.msg);
          }
          this.showCont = true;
        })
        .catch(() => {
          this.showTimeOut = true;
          this.showCont = true;
        });
    },
    nextfn() {
      if (this.$route.path == "/msg") {
        let h =
          document.documentElement.scrollHeight || document.body.scrollHeight;
        let wh =
          document.documentElement.clientHeight || document.body.clientHeight;
        let top = document.documentElement.scrollTop || document.body.scrollTop;
        let bottom = h - wh - top;
        if (bottom <= 50) {
          if (this.getting == false) {
            if (this.last_page > this.page) {
              this.getting = true;
              this.page++;
              this.getData();
            }
          }
        }
      }
    },
  },
  mounted() {},
  created() {
    this.getData();
    // this.showTimeOut = true;
    // this.showCont = true;
  },
};
</script>
<style scoped lang="less">
.container {
  background-color: #f1f4fb;
  min-height: 100vh;
  .showCont {
    padding-top: 0.75rem;
    padding-bottom: 3.75rem;
    box-sizing: border-box;
  }
  .msgCont {
    width: 92%;
    margin: 0 auto;
    .msgItem {
      background-color: #fff;
      border-radius: 0.25rem;
      padding: 0.75rem 4%;
      box-sizing: border-box;
      margin-bottom: 0.75rem;
      .msgHead {
        width: 100%;
        display: flex;
        align-items: center;
        .headIcon {
          width: 1.5rem;
          height: 1.5rem;
          background-color: #86a9fb;
          color: #fff;
          text-align: center;
          border-radius: 50%;
          text-align: center;
          line-height: 1.5rem;
          position: relative;
          .yuan {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #ff5757;
            position: absolute;
            right: 2px;
            bottom: 2px;
          }
          .iconfont {
            font-size: 0.9rem;
          }
        }
        .headName {
          flex: 1;
          width: 1rem;
          font-size: 0.8rem;
          font-weight: bold;
          margin: 0 0.75rem;
          display: flex;
          .readTag {
            // background-color: #ff5757;
            font-size: 0.6rem;
            color: #ff5757;
            border: 1px solid #ff5757;
            padding: 0.15rem 0.5rem;
            border-radius: 0.1rem;
            transform: scale(0.7);
          }
        }
        .headTime {
          color: #666;
          font-size: 0.6rem;
        }
      }
      .msgDes {
        color: #666;
        font-size: 0.6rem;
        padding: 0.75rem 0;
      }
      .msgUnder {
        padding-top: 0.75rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 0.6rem;
        border-top: 1px dashed #ccc;
        .iconfont {
          color: #666;
        }
      }
    }
  }
}
</style>
